import React, { useState } from 'react';
import { Card, Tabs, Statistic } from 'antd';

interface TestResult {
  metrics: {
    tokensUsed: number;
  };
}

const RetrievalTester: React.FC = () => {
  const [selectedResult, setSelectedResult] = useState<TestResult | null>({
    metrics: {
      tokensUsed: 1500
    }
  });

  return (
    <Card>
      <Tabs
        items={[
          {
            key: '1',
            label: '检索测试',
            children: (
              <div style={{ display: 'flex', gap: 16 }}>
                <Card title="Token使用量" style={{ flex: '1 0 200px' }}>
                  <Statistic 
                    value={selectedResult?.metrics.tokensUsed} 
                    valueStyle={{ 
                      color: selectedResult && selectedResult.metrics.tokensUsed < 1000 ? '#3f8600' : 
                              selectedResult && selectedResult.metrics.tokensUsed < 2000 ? '#faad14' : '#cf1322'
                    }}
                  />
                </Card>
              </div>
            )
          },
          {
            key: '2',
            label: '历史测试',
            children: <div>历史测试记录</div>
          }
        ]}
      />
    </Card>
  );
};

export default RetrievalTester; 